<template>
	<div class='right-drawer'>
		<!-- 右侧抽屉 -->
		<el-drawer v-model="drawer" title="项目配置" :with-header="false">
		    <span>项目配置</span>
			
			  <el-divider>
				    多个主题色
			  </el-divider>
			  
			 <div class='color-picker'>
				  <el-tag  v-for='{name,color,value} in predefineColors' :color='color' size="large" @click='changeColor(value)' @hover='activeColor(value)'>{{name}}</el-tag>
			 </div>
	</el-drawer>
	</div>
</template>

<script setup>
	import {ref,defineProps,onMounted} from 'vue'
	import bus from "@/utils/EventBus"
	import {useThemeStore} from '@/stores/modules/theme';
	defineProps(['drawer'])
	const themeStore = useThemeStore()
	const drawer = ref(false)
	
	import { Sunny, Moon } from '@element-plus/icons-vue'
	// 主题色修改
	const color = ref('rgba(255, 69, 0, 0.68)')
	// 主题颜色
	const predefineColors = ref([
		{
				  name:'默认',
				  color:'#154361',
				  value:''
				  
		},
	  {
		  name:'红鸢',
		  color:'rgb(153,70,57)',
		  value:'milvus'
		  
	  },
	  {
	  		  name:'赤红',
			  color:'rgb(203,64,66)',
			  value:'crimson'
	  		 
	  },
	  {
	  		  name:'白茶',
			   color:'rgb(188,159,119)',
			  value:'whitetea'
	  		  
	  },
	  {
	  		  name:'金茶',
			   color:'rgb(199,128,45)',
			  value:'goldentea'
	  		 
	  },
	  {
	  		  name:'千岁绿',
			   color:'rgb(54,86,60)',
			  value:'qiansuigreen'
	  		  
	  },
	  {
	  		  name:'唐皇茶',
			   color:'rgb(93,172,129)',
			  value:'tanghuangcha'
	  		 
	  },
	  {
	  		  name:'箬竹',
			   color:'rgb(153,70,57)',
	  		  value:'indocalamus'
	  },
	  {
	  		  name:'蓝海松茶',
			   color:'rgb(54,86,60)',
			  value:'blueseapinetea'
	  		 
	  },
	  {
	  		  name:'胭脂',
			   color:'rgb(159,53,58)',
	  		  value:'rouge'
	  },
	  {
	  		  name:'银朱',
			   color:'rgb(199,62,58)',
			  value:'vermilion'
	  		 
	  },
	  {
	  		  name:'海涛蓝',
			   color:'rgb(21,85,154)',
			  value:'haitaoblue'
	  		 
	  },
	  {
	  		  name:'牵牛紫',
			   color:'rgb(104,23,82)',
			  value:'morningglorypurple'
	  		 
	  },
	  {
	  		  name:'兰花紫',
			   color:'rgb(153,50,204)',
	  		 value:'orchid',
	 },
	  {
	  		  name:'桃花粉',
			   color:'rgb(255,96,108)',
			  value:'peachpollen'
	  		  
	  },
	  {
	  		  name:'石青',
			   color:'rgb(22,42,82)',
			  value:'azurite'
	  }
	])
	
	const changeColor=(e)=>{
		themeStore.setTheme(e)
		document.querySelector('html').className = themeStore.theme
	}
	
	// 激活和关闭抽屉
	onMounted(()=>{
		bus.on('changeDrawer',()=>{
			drawer.value = !drawer.value 
		})
	})
	
</script>

<style scoped lang="scss">
	.color-picker{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		height: 100px;
		.el-tag{
			width: 50px;
			margin: 0 6px;
			height: 40px;
			color: #fff;
		}
	}
</style>